// 获取系统信息
var system = uni.getSystemInfoSync();
//console.log(system)
export default {
	data() {
		return {
			statusBarHeight: system.statusBarHeight,// 状态栏
			screenHeight: system.screenHeight, // 屏幕高度
			// #ifdef H5
			TopAppdown: 45,// h5端顶部下载App提示的占用高度
			// #endif
			// #ifdef APP-PLUS || MP
			TopAppdown: 0,// 其他平台无此提示
			// #endif
			// 动态切换样式【当用户吧搜索结果向上滑动30px时候，固定平台搜索分类和排序】
			fixedTop:false,
			nofixedTop:false,
			
			//
			defaultKeyword: "搜索影视名称",//预加载内容
			keyword: "",//搜索的内容
			keywordArrList:[],//联系搜索结果列表
			yuyingShow:true,//语音搜索
			speechEngine: { //语音引擎=>讯飞:iFly,百度:'baidu'
				type: String,
				default: 'iFly'
			},
			isFocus:false,//搜索输入框获取焦点
			oldKeywordList: [],//加载历史搜索词,自动读取本地Storage
			hotKeywordList: [],//加载热门搜索词
			keywordList: [],//联想搜索词列表
			forbid: '',//热门搜索开关
			isShowKeywordLianxiangList:false,//联想搜索词列表
			isShowKeywordList: true,//【搜索前-搜索词相关盒子】 历史搜索||相关搜索||三步提示
			isShowKeywordGoodslist:false,//搜索后-商品搜索结果与平台搜索类型等盒子】
			total:'',//共用多少条数据【关键词总数据】
			limit:'',//每页20条数据
			xtsetting:[],//后台配置的系统设置
			//
			Videolist:[],//视频搜索结果
			pg:0,//页码
		}
	},
	watch:{
		keyword: function(sokukey) {
			console.log(sokukey)
			if (sokukey == '') {
				this.yuyingShow = true
			}
		}
	},
	onLoad(e) {
		let xtSettingValue = uni.getStorageSync('xtsetting')
		this.xtsetting = xtSettingValue
		console.log("系统设置")
		//console.log(xtSettingValue)
		this.init();
		
		console.log("搜索页是否有e.item")
		if (e.item) {
			//解析url参数
			let item = JSON.parse(decodeURIComponent(e.item))
			console.log(item)
			console.log("传递了参数，自动搜索")
			//执行搜索
			this.doSearch(item.title)
		}else {
			console.log("没有传递任何参数，则用户手动搜索")
		}
	},
	methods: {
		init() {
			//加载默认搜索关键字
			this.loadDefaultKeyword();
			//加载历史搜索,自动读取本地Storage
			this.loadOldKeyword();
			//加载热门搜索
			this.loadHotKeyword();
	
		},
		blur(){
			uni.hideKeyboard()
		},
		//加载默认搜索关键字
		loadDefaultKeyword() {
			//定义默认搜索关键字，可以自己实现ajax请求数据再赋值,用户未输入时，以水印方式显示在输入框，直接不输入内容搜索会搜索默认关键字
			this.defaultKeyword = "搜索影视名称";
		},
		//加载历史搜索,自动读取本地Storage
		loadOldKeyword() {
			uni.getStorage({
				key: 'TBOldKeys',
				success: (res) => {
					var TBOldKeys = JSON.parse(res.data);
					this.oldKeywordList = TBOldKeys;
				}
			});
		},
		//加载热门搜索
		loadHotKeyword() {
			//定义热门搜索关键字，可以自己实现ajax请求数据再赋值
			this.hotKeywordList = ['千古玦尘', '暂时关闭热门搜索'];
		},
		//监听输入
		inputChange(event) {
			console.log("监听输入")
			//隐藏语音搜索
			this.yuyingShow = false
			//兼容引入组件时传入参数情况
			var keyword = event.detail?event.detail.value:event
			if (!keyword) {
				this.keywordList = []
				this.isShowKeywordList = true//
				this.isShowKeywordLianxiangList = false//
				// #ifdef APP-NVUE || APP-PLUS-NVUE
				this.isShowKeywordGoodslist = false
				// #endif
				return;
			}
			this.isShowKeywordList = false//
			this.isShowKeywordLianxiangList = true//
			// #ifdef APP-NVUE || APP-PLUS-NVUE
			this.isShowKeywordGoodslist = false
			// #endif
			//以下示例截取淘宝的关键字，请替换成你的接口
			/* 
			uni.request({
				url: 'https://suggest.taobao.com/sug?code=utf-8&q=' + keyword, //仅为示例
				success: (res) => {
					this.keywordList = [];
					this.keywordList = this.drawCorrelativeKeyword(res.data.result, keyword);
					console.log(this.keywordList);
				}
			}); 
			*/
			//联想搜索-苹果CMS接口
			//let APIjiekoUrl = this.appIndexXtsetting[0].APIjiekoUrl
			let APIjiekoUrl = this.xtsetting.APIjiekoUrl
			//console.log("接口 = " + APIjiekoUrl)
			uni.request({
				url: APIjiekoUrl + '/index.php/ajax/suggest?mid=1&code=1&wd=' + keyword, //联想接口地址
				dataType: 'json',
				success: (res) => {
					this.keywordArrList = [];
					console.log(res.data.list);//搜索结果列表
					console.log(res.data.limit);//每页20条数据
					console.log(res.data.total);//共用多少条数据
					
					this.limit = res.data.limit;
					this.total = res.data.total;
					
					this.keywordList = [];
					this.keywordList = this.drawCorrelativeKeyword(res.data.list, keyword);
					console.log("keywordList")
					console.log(this.keywordList)
					//this.keywordArrList = this.keywordArrList.concat(res.data.list);
					//console.log("keywordArrList")
					//console.log(this.keywordArrList);
				}
			});
		},
		//高亮关键字
		drawCorrelativeKeyword(keywords, keyword) {
			var len = keywords.length,
				keywordArr = [];
				this.keywordArrList = [];
				//console.log("我是len:"+len);//数据共多少条
			for (var i = 0; i < len; i++) {
				/* 
				var row = keywords[i];
				console.log("我是row"+row); 
				*/
				//找list":数组下的name
				//list":[{"id":15825,"name":"
				var row = keywords[i].name;
				//console.log("我是名称row:"+row);
				//console.log("我是名称rowname"+row.name);//名称
				//console.log("我是图片rowpic"+row.pic);//图片
				//console.log("我是ID rowname"+row.id);//视频ID/视频地址
				
				//定义高亮#red
				
				var html = row.replace(keyword, "<span style='color: #ec4d4d;'>" + keyword + "</span>");
				//console.log("我是keyword"+keyword);
				//console.log("HTML"+html);
				html = '<div>' + html + '</div>';
				
				//console.log(html)
				
				var tmpObj = {
					keyword: row,
					htmlStr: html
				};
				keywordArr.push(tmpObj)
				// app-nvue 平台 rich-text的nodes 属性只支持使用 Array 类型
			}
			console.log("return keywordArr")
			return keywordArr;
		},
		//顶置关键字
		setKeyword(index) {
			this.keyword = this.keywordList[index].keyword;
			console.log("我是顶置关键字"+this.keyword);
		},
		//清除历史搜索
		oldDelete() {
			uni.showModal({
				content: '确定清除历史搜索记录？',
				success: (res) => {
					if (res.confirm) {
						console.log('用户点击确定');
						this.oldKeywordList = [];
						uni.removeStorage({
							key: 'TBOldKeys'
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		//热门搜索开关
		hotToggle() {
			this.forbid = this.forbid ? '' : '_forbid';
		},
		//执行搜索-h5||MP
		doSearch(keyword) {
			this.isShowKeywordGoodslist = true;
			keyword = keyword===false?this.keyword:keyword;
			this.keyword = keyword;
			this.saveKeyword(keyword); //保存为历史 
			uni.showToast({
				title: keyword,
				icon: 'none',
				duration: 2000
			});
			console.log("搜索的关键词："+keyword);
			//以下是示例跳转淘宝搜索，可自己实现搜索逻辑
			/*
			//#ifdef APP-PLUS
			plus.runtime.openURL(encodeURI('taobao://s.taobao.com/search?q=' + keyword));
			//#endif
			//#ifdef H5
			window.location.href = 'taobao://s.taobao.com/search?q=' + keyword
			//#endif
			*/
		    //跳转搜索 结果页
		    //this.GoToSearchVideolist();
			
			
			//执行搜索
			this.getSearchVideolist(keyword)
		},
		// 执行搜索 NVUE 输入框上的
		doSearchNVUE(e) {
			let keyword = e.currentTarget.dataset.keyword
			this.keyword = keyword
			this.saveKeyword(keyword) //保存为历史
			console.log(keyword)
			
			//跳转搜索 结果页
			//this.GoToSearchVideolist()
			
			//执行搜索
			this.getSearchVideolist(keyword)
		},
		/* =================
		 * =  搜索结果请求  =
		 * =================
		 */
		getSearchVideolist(keyword){
			let APIjiekoUrl = this.xtsetting.APIjiekoUrl
			this.isShowKeywordGoodslist = true// 搜索结果盒子
			this.isShowKeywordList = false;// 搜索词盒子
			this.isShowKeywordLianxiangList = false;// ◇联想搜索词盒子
			uni.showToast({
				title:keyword,
				icon:"none"
			})
			let that = this
			let pg = this.pg//页码
			this.request({
				type:'video',
				url:APIjiekoUrl+'/api.php/provide/vod/',
				data:{
					ac:"videolist",//视频列表详情模式
					wd:keyword,//关键词
					pg:pg//分页
				},
				isShowLoading:true
			})
			.then(res => {
				console.log("搜索的结果")
				console.log(res.data.list)
				if (res.data.list.length == 0) {
					uni.showToast({
						title:'暂无此视频'
					})
				}
				/* =========================================
				 * =  由于NVUE list>cell不支持row水平布局
				 * =  只支持竖向布局，因此这里把数组按照
				 * =  每3个合并成一个新的数组，页面上cell
				 * =  还是渲染item,只不过此时的item已经是
				 * =  3个数组的形式，然后组件里接受item再
				 * =  去循环，就可以实现一排3个视频展示，并
				 * =  且一排还是只用了一个cell。
				 * =========================================
				 */
				//js将每3个数组放到一个新的数组里面
				var data = res.data.list
				var result = []
				for(var i=0;i<data.length;i+=3){
				    result.push(data.slice(i,i+3));
				}
				console.log("result --- 396")
				console.log(result)
				//写入视频搜索结果
				//that.Videolist = that.Videolist.concat(result)
				//写入搜索，不追加
				that.Videolist = result
				console.log("that.Videolist")
				console.log(that.Videolist)
			})
			.catch(err => {
				console.log(err)
				uni.showToast({
					title:'出错了,请重试'
				})
			})
		},
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		//跳转搜索 结果页
		GoToSearchVideolist() {
			this.isShowKeywordGoodslist = true// 搜索结果盒子
			this.isShowKeywordList = false;// 搜索词盒子
			this.isShowKeywordLianxiangList = false;// ◇联想搜索词盒子
			let keyword = this.keyword
			// uni.navigateTo({
			//     url: '/pages/App/search/search-Videolist/search-Videolist?so='+keyword,
			// });
			uni.showToast({
				title:keyword,
				icon:"none"
			})
		},
		//保存关键字到历史记录
		saveKeyword(keyword) {
			uni.getStorage({
				key: 'TBOldKeys',
				success: (res) => {
					var TBOldKeys = JSON.parse(res.data);
					var findIndex = TBOldKeys.indexOf(keyword);
					if (findIndex == -1) {
						TBOldKeys.unshift(keyword);
					} else {
						TBOldKeys.splice(findIndex, 1);
						TBOldKeys.unshift(keyword);
					}
					//最多10个纪录
					TBOldKeys.length > 10 && TBOldKeys.pop();
					uni.setStorage({
						key: 'TBOldKeys',
						data: JSON.stringify(TBOldKeys)
					});
					this.oldKeywordList = TBOldKeys; //更新历史搜索
				},
				fail: (e) => {
					var TBOldKeys = [keyword];
					uni.setStorage({
						key: 'TBOldKeys',
						data: JSON.stringify(TBOldKeys)
					});
					this.oldKeywordList = TBOldKeys; //更新历史搜索
				}
			});
		},
		// #ifdef APP-PLUS || APP-NVUE || APP-PLUS-NVUE || APP-VUE
		// 语音搜索
		yuyingSearch() {
			this.startRecognize()
		},
		// 语音搜索
		startRecognize: function() {	//语音输入
			let _this = this
			let options = {}
			options.engine = _this.speechEngine
			options.punctuation = false // 是否需要标点符号 
			options.timeout = 10 * 1000
			plus.speech.startRecognize(options, function(s) {
				_this.keyword = _this.keyword + s
				console.log("语音搜索结果")
				console.log(s)
				if (!s == '') {
					_this.doSearch(s)
				}
			})
		},
		// #endif
		
		
		
		// #ifdef H5 || MP || APP-VUE
		// 切换样式
		scroll(e) {
			//console.log(e.detail.scrollTop)
			let scrollTop = e.detail.scrollTop
			if (scrollTop > 300) {
				this.fixedTop = true
				this.nofixedTop = false
			} else {
				this.fixedTop = false
				this.nofixedTop = true
			}
		},
		// #endif
		// #ifdef APP-NVUE || APP-PLUS-NVUE
		loadMore(e) {
			//console.log(e)
		}
		// #endif
		
	}
}